<template>
  <div class="container">
    <router-view></router-view>
    <router-view name="footer"></router-view>
  </div>
</template>
<style lang="scss">
@import '@/lib/reset.scss'; // 引入重置样式，@表示的就是src目录
html, body, .container, .detail {
  @include rect(100%, 100%); // width: 100%;height: 100%;
}

.container, .detail {
  // 建议使用弹性盒布局
  @include flexbox(); // display: -webkit-box;display: -ms-flexbox;display: flex;
  @include flex-direction(column); // -webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;
  .box {
    @include flex(); // -webkit-box-flex: 1;-ms-flex: 1;flex: 1;width: .1px;
    @include rect(100%, auto);
    @include flexbox();
    @include flex-direction(column);
    @include overflow(hidden);
    .header {
      @include rect(100%, 0.44rem);
      @include background-color(#000);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .content {
      @include flex();
      @include rect(100%, auto);
      @include overflow(); // overflow: auto;-webkit-overflow-scrolling: touch;
    }
  }
  .footer {
    @include rect(100%, 0.5rem);
    @include background-color(#efefef);
    ul {
      @include rect(100%, 100%);
      @include flexbox();
      li{
        @include flex();
        @include rect(auto, 100%);
        @include flexbox(); // 一下几句实现的是元素的水平垂直居中
        @include flex-direction(column);
        @include justify-content(); // -webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;
        @include align-items(); // -webkit-box-align: center; -ms-flex-align: center; align-items: center;
        &.router-link-active {
          @include color(orange);
        }
        span {
          @include font-size(0.24rem);
        }
        p {
          @include font-size(0.12rem);
          @include margin(-5px 0 0);
        }
      }
    }
  }
}
</style>
